<template>
  <div class="ThreeDemo">
    <!-- 加载提示 -->
    <div class="maskLoading" v-if="isLoading">
      <div class="loading">
        <div :style="{ width: loadingWidth + '%' }"></div>
      </div>
      <div style="padding-left: 10px">{{ parseInt(loadingWidth) }}%</div>
    </div>
    <!-- 位置信息及操作按钮 -->
    <div class="mask">
      <p>x : {{ x }} y:{{ y }} z :{{ z }}</p>
      <button @click="Three.autoRotation">转动车</button>
      <button @click="Three.autoRotation(false)">停止</button>
      <div class="flex">
        <div
          @click="setCarColor(item)"
          v-for="(item, index) in colorAry"
          :style="{ backgroundColor: item }"
          :key="index"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import threeUtil from "/utls/three-util2";

export default {
  name: "Home",
  props: {
    msg: String,
  },
  data() {
    return {
      Three: {},
      colorAry: [
        "rgb(216, 27, 67)",
        "rgb(142, 36, 170)",
        "rgb(81, 45, 168)",
        "rgb(48, 63, 159)",
        "rgb(30, 136, 229)",
        "rgb(0, 137, 123)",
        "rgb(67, 160, 71)",
        "rgb(251, 192, 45)",
        "rgb(245, 124, 0)",
        "rgb(230, 74, 25)",
        "rgb(233, 30, 78)",
        "rgb(156, 39, 176)",
        "rgb(0, 0, 0)",
      ], // 车身颜色数组
    };
  },
  computed: {
    isLoading() {
      return this.Three.isLoading;
    },
    loadingWidth() {
      return this.Three.loadingWidth;
    },
    x() {
      return this.Three.x;
    },
    y() {
      return this.Three.y;
    },
    z() {
      return this.Three.z;
    },
  },
  created() {
    const threeObj = new threeUtil({
      modelUrl: "/static/3d/koala_con_flor/scene.gltf",
    });
    this.Three = threeObj;
    threeObj.init();
    threeObj.autoRotation();
  },
  unmounted() {
    this.Three = null;
  },
  methods: {
    setCarColor(color) {
      this.Three.setModelColor(color, "mesh_0");
    },
  },
};
</script> 

<style lang="less" scoped>
.ThreeDemo {
  .maskLoading {
    background: #000;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1111111;
    color: #fff;
    .loading {
      width: 400px;
      height: 20px;
      border: 1px solid #fff;
      background: #000;
      overflow: hidden;
      border-radius: 10px;
      & > div {
        background: #fff;
        height: 20px;
        width: 0;
        transition-duration: 500ms;
        transition-timing-function: ease-in;
      }
    }
  }

  canvas {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .mask {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    .flex {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      & > div {
        width: 10px;
        height: 10px;
        margin: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>
